<template>
    <el-card class="file-list-card" shadow="hover">
        <template #header>
            <div class="card-header">
                <span>{{ component.title }}</span>
            </div>
        </template>
        <el-input v-model="filterText" :placeholder="component.searchTips" />
        <el-tree ref="treeRef" nodeKey="id" class="file-tree" accordion highlight-current :data="data" :load="loadNode"
            :props="defaultProps" :defaultExpandAll="component.isDefaultExpandAll" :filter-node-method="filterNode"
            draggable @node-click="handleNodeClick">
        </el-tree>
    </el-card>
</template>

<script setup lang="ts">
import { getVideoById } from "@/apis/web/File"
import { buildElTreeData } from "@/utils/core"
import { ElTree } from "element-plus"
import { computed, getCurrentInstance, onMounted, ref, watch } from "vue"
import { useStore } from "vuex"
import { IFileListState } from "@/store/models/Home/Aside/FileList/types"
interface Tree {
    id: number
    name: string
    children?: Tree[]
    path?: string,
    extname?: string,
}
const store = useStore();
const { emit } = getCurrentInstance();
const defaultProps = {
    children: "children",
    label: "name",
    path: "path",
    type: "type",
    extname: "extname",
}
const component = computed(() => store.state.home.frontAside.fileList as IFileListState);
// const component = reactive({
//     // title: "文件列表",
//     // searchTips: "搜索文件",
//     title: computed(() => store.state.home.frontAside.fileList.title),
//     searchTips: computed(() => store.state.home.frontAside.fileList.searchTips),
// })


let data = ref<Tree[]>([])
const fileTree = computed({
    get() {
        return store.state.home.frontAside.fileList.fileTree;
    },
    set(val) {
        store.commit("home/frontAside/fileList/_setFileTree", val);
        return val;
    }
})

if (fileTree.value.length <= 0) {
    store.commit("home/frontAside/fileList/_getFileTree")
}
onMounted(() => {
    setTimeout(() => {
        data.value = buildElTreeData(fileTree.value)
    }, 300)
})

// 过滤关键字
const filterText = ref("")
const treeRef = ref<InstanceType<typeof ElTree>>()
watch(filterText, val => treeRef.value!.filter(val))
const filterNode = (value: string, data: Tree) => (!value ? true : data.name.includes(value))

// 被点击的节点数据
const handleNodeClick = async (node: any) => {
    emit('handleNodeClick', node)

    // if (node.children && node.children.length > 0) {
    //     return
    // }
    // const parent = node.parent
    // if (parent) {
    //     parent.expanded = true
    // }
}

// 懒加载树
const loadNode = async (node: any) => {
    if (!node.loaded && node.level < 2) {
        const children = await fetchChildren(node.id)
        node.loaded = true
        node.children = children
    }
}
// 获取子级数据
const fetchChildren = async (id: string) => {
    // Perform an API call to fetch the children of this node with `id`.
    // Return an array of objects in the same format as `data`.
}
onMounted(() => {
})
</script>
